<script setup lang="ts">
import NavigationBar from './components/NavigationBar.vue'
import IndexSwiper from './components/IndexSwiper.vue'
import Categories from './components/Categories.vue'
import ProductContainer from './components/ProductContainer.vue'
import {getBannerList, getCardList} from '@/api'
import type {ICardResponse} from '@/typings/api'

// 轮播图初始变量
let bannerList = $ref<string[]>([])
let productList = $ref<ICardResponse[]>([])

onLoad(async () => {
    getBannerList().then(res => (bannerList = res.data.img_url.split(',').map(item => item.replace('\n', ''))))
    getCardList().then(res => (productList = res.data))
})

</script>

<template>
    <view relative w-full>
        <NavigationBar/>
        <view style="padding: 25rpx 35rpx 0 35rpx" box-border overflow-hidden>
            <view>
                <IndexSwiper :banner-list="bannerList"/>
                <Categories/>
                <ProductContainer v-for="item in productList" :key="item.id" :title="item.name"
                                  :list="item.product_list"/>
            </view>
        </view>
    </view>
</template>
